<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <h1>Lint</h1>

    <h2>HTMLHint</h2>
    <h3>参考链接</h3>
    <ul>
        <li><a target="_blank" href="https://github.com/htmlhint/HTMLHint/wiki/Rules">HTMLHint Rules</a></li>
    </ul>

    <h3>主要规则</h3>

    <ul>
        <li><strong>alt-require</strong> 元素的alt属性必须存在，area [href]和input [type = image]的alt属性必须具有值。</li>
        <li><strong>attr-lowercase</strong> 所有属性名称都必须小写。</li>
        <li><strong>attr-no-duplication</strong> 元素不能具有重复的属性。</li>
        <li><strong>attr-unsafe-chars</strong> 属性值不能包含不安全的字符。</li>
        <li><strong>attr-value-double-quotes</strong> 属性值必须用双引号引起来。</li>
        <li><strong>attr-value-not-empty</strong> 所有属性必须具有值。</li>
        <li><strong>csslint</strong> 使用csslint扫描css。</li>
        <li><strong>doctype-first</strong> Doctype必须先声明。</li>
        <li><strong>doctype-html5</strong> Doctype必须是html5。</li>
        <li><strong>empty-tag-not-self-closed</strong> 空标签不应自行关闭。</li>
        <li><strong>head-script-disabled</strong> script 标签 不能在 head 中使用。</li>
        <li><strong>href-abs-or-rel</strong> href 属性 必须是绝对路径或相对路径。</li>
        <li><strong>id-class-ad-disabled</strong> id和class属性不能使用ad关键字，它会被adblock软件阻止。</li>
        <li><strong>id-class-value</strong> id和class属性值必须符合指定的规则。</li>
        <li><strong>id-unique</strong> id属性的值必须唯一。</li>
        <li><strong>inline-script-disabled</strong> 内联脚本不能使用。</li>
        <li><strong>inline-style-disabled</strong> 不能使用内联样式。</li>

        <li><strong>jshint</strong> 使用jshint扫描脚本。</li>
        <li><strong>space-tab-mixed-disabled</strong> 请勿混用制表符和空格以缩进。</li>
        <li><strong>spec-char-escape</strong> 特殊字符必须转义。</li>
        <li><strong>src-not-empty</strong> img（script，link）的src属性必须具有一个值。</li>
        <li><strong>style-disabled</strong> style标签不能使用。</li>
        <li><strong>tag-pair</strong> 标签必须成对。</li>
        <li><strong>tag-self-close</strong> 空标签必须是自封闭的。</li>
        <li><strong>tagname-lowercase</strong> 所有html元素名称都必须小写。</li>
        <li><strong>title-require</strong> title必须出现在标记中。</li>
    </ul>

    <h3>模板</h3>
    <pre>
        {
            "alt-require": true,
            "attr-lowercase": true,
            "attr-no-duplication": true,
            "attr-unsafe-chars": true,
            "attr-value-double-quotes": true,
            "attr-value-not-empty": false,
            "csslint": false,
            "doctype-first": true,
            "doctype-html5": true,
            "empty-tag-not-self-closed": false,
            "head-script-disabled": true,
            "href-abs-or-rel": false,
            "id-class-ad-disabled": true,
            "id-class-value": "hump",
            "id-unique": true,
            "inline-style-disabled": false,
            "inline-script-disabled": false,
            "jshint": true,
            "space-tab-mixed-disabled": false,
            "spec-char-escape": false,
            "src-not-empty": true,
            "style-disabled": true,
            "tag-pair": true,
            "tag-self-close": false,
            "tagname-lowercase": true,
            "title-require": false
        }
    </pre>


    <h2>stylelint</h2>
    <h3>参考链接</h3>
    <ul>
        <li><a target="_blank" href="https://stylelint.io/">stylelint官网</a></li>
        <li><a target="_blank" href="https://stylelint.docschina.org/user-guide/rules/">stylelint 规则 列表</a></li>
    </ul>

    <h3>模板</h3>
    <pre>
        {
            "extends": "stylelint-config-standard",
            "rules": {
                "color-no-invalid-hex": true,
                "font-family-no-duplicate-names": true,
                "font-family-no-missing-generic-family-keyword": true,
                "function-calc-no-invalid": true,
                "function-calc-no-unspaced-operator": true,
                "function-linear-gradient-no-nonstandard-direction": true,
                "string-no-newline": true,
                "unit-no-unknown": true,
                "property-no-unknown": true,
                "keyframe-declaration-no-important": true,
                "declaration-block-no-duplicate-properties": true,
                "declaration-block-no-shorthand-property-overrides": true,
                "block-no-empty": true,
                "selector-pseudo-class-no-unknown": true,
                "selector-pseudo-element-no-unknown": true,
                "selector-type-no-unknown": true,
                "media-feature-name-no-unknown": true,
                "at-rule-no-unknown": true,
                "comment-no-empty": true,
                "no-descending-specificity": true,
                "no-duplicate-at-import-rules": true,
                "no-duplicate-selectors": true,
                "no-empty-source": true,
                "no-extra-semicolons": true,
                "no-invalid-double-slash-comments": true,
                "color-named": "never",
                "unit-whitelist": [
                    "px",
                    "rem",
                    "%"
                ],
                "shorthand-property-no-redundant-values": true,
                "declaration-no-important": true,
                "color-hex-case": "lower",
                "color-hex-length": "long",
                "font-family-name-quotes": "always-where-recommended",
                "font-weight-notation": "numeric",
                "function-max-empty-lines": 0,
                "function-name-case": "lower",
                "function-url-quotes": "always",
                "function-whitespace-after": "always",
                "string-quotes": "double",
                "unit-case": "lower",
                "value-keyword-case": "lower",
                "value-list-max-empty-lines": 0,
                "custom-property-empty-line-before": "never",
                "property-case": "lower",
                "linebreaks": "unix",
                "max-empty-lines": 2,
                "no-eol-whitespace": true,
                "no-missing-end-of-source-newline": true,
                "no-empty-first-line": true
            }
        }
    </pre>


    <h2>ESLint</h2>
    <h3>参考链接</h3>
    <ul>
        <li><a target="_blank" href="https://eslint.org/">eslint</a></li>
        <li><a target="_blank" href="https://cn.eslint.org/">eslint 中文网</a></li>
        <li><a target="_blank" href="https://cn.eslint.org/docs/rules/">eslint Rules</a></li>
        <li><a target="_blank" href="https://juejin.im/post/5d3d3a685188257206519148">深入理解 ESlint</a></li>
    </ul>

    <h3>模板</h3>
    <pre>
        module.exports = {
            root: true,
            env: { node: true },
            extends: ["plugin:vue/essential", "eslint:recommended", "standard"],
            plugins: ["html"],
            rules: {
              "no-console": "off",
              "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
              "no-unused-vars": "off",
              "eqeqeq": "off",
              "new-cap": "off",
              "no-tabs": "off"
            },
            parserOptions: { parser: "babel-eslint" }
        };
    </pre>
</body>

</html>